<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="../css/style.css">
    <script src="X-admin/js/jquery.js"></script>
    <script src="X-admin/lib/layui/layui.js"></script>
    <script src="X-admin/js/xadmin.js"></script>
</head>
<body>
<!--header-->
<div class="header" style="height: 120px;display:flex;align-items: center">
    <div class="container" style="display: flex;justify-content: center;align-items: center">
        <div class="navbar-header" style="display: flex;justify-content: center">
            <h1 class="navbar-brand"><a>即刻实现工位自由，速来！</a></h1>
        </div>
    </div>

</div>
<!--//header-->

</body>
</html>

<!--account-->
<div class="account">
    <div class="container">
        <div class="register">

            <form action="register.action" method="post">
                <div class="register-top-grid">
                    <h3>注册新用户</h3>
                    <div class="input" id="">
                        <span>用户名 <label style="color:red;">*</label></span>
                        <input type="text" id="username" name="username" value="请输入用户名" required="required"
                               onfocus="if(value == defaultValue){value='';this.style.color='#000'}"
                               onblur="if(!value){value = defaultValue;this.style.color='#999'}">
                    </div>
                    <div class="input" id="password">
                        <span>密码 <label style="color:red;">*</label></span>
                        <input type="text" id="passwd" name="passwd" value="请输入密码" required="required"
                               onfocus="if(value == defaultValue){value='';this.style.color='#000'}"
                               onblur="if(!value){value = defaultValue;this.style.color='#999'}">
                    </div>
                    <div class="input" id="person">
                        <span>邮箱<label></label></span>
                        <input type="text" id="emails" name="emails" value="邮箱"
                               onfocus="if(value == defaultValue){value='';this.style.color='#000'}"
                               onblur="if(!value){value = defaultValue;this.style.color='#999'}">
                    </div>
                    <div class="input" id="phone">
                        <span>电话<label></label></span>
                        <input type="text" id="phones" name="phones" value="电话"
                               onfocus="if(value == defaultValue){value='';this.style.color='#000'}"
                               onblur="if(!value){value = defaultValue;this.style.color='#999'}">
                    </div>

                </div>
                <div class="register-but text-center">
                    <input type="submit" lay-submit lay-filter="register" value="提交" style="width: 300px">
                </div>
            </form>
        </div>
    </div>
</div>
<script>layui.use(['form', 'layer', 'jquery', 'laydate'],
    function () {
        var laydate = layui.laydate;
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //监听提交
        form.on('submit(register)',
            function (data) {
                let field = {
                    userna: $("#username").val(),
                    passwd: $("#passwd").val(),
                    emails: $("#emails").val(),
                    phones: $("#phones").val()
                };
                $.ajax({
                    url: 'http://localhost:9200/api-person/login/register',//地址：访问后台的地址
                    data: field,//前端传递给后台的数据
                    type: 'post',
                    dataType: 'json',//是后端传递到前端的数据格式
                    success: function (data) {//后端给前端的一个反馈
                        console.log(data);
                        if (data.msg == "号码已被注册！") {
                            layer.msg("号码已被注册！");
                        }
                        if (data.msg == "邮箱已被注册！") {
                            layer.msg("邮箱已被注册！");
                        }
                        if (data.code == 0) {
                            //发异步，把数据提交给php
                            layer.msg("亲爱的新会员: " + $("#username").val() + ",欢迎注册！", {
                                    icon: 6,
                                    time: 3000,
                                    shade: 0.4
                                },
                                function () {
                                    sessionStorage.setItem("userType","user");
                                    sessionStorage.setItem("userid", data.data.userid);
                                    sessionStorage.setItem("avatar", data.data.avatar);
                                    window.open("index.html", "_self");
                                });
                        }
                    }
                });
                return false;
            });

    });
</script>
</body>
</html>